<template>
	<!-- 置顶按钮，可以提供样式，图片type，hover样式 -->
	<div class="stick" v-show="isShow" @click="$emit('handler')" :style="stick">
		<Patch :patch="patch">
			<Icon type="arrowUp"/>
		</Patch>
	</div>
</template>

<script>
export default{
	name: 'Stick',
	props:{
		// 置顶按钮Hover效果
		patch: {
			type: Object,
			default: () => ({
				hover: {
					inner: {
						backgroundColor: '#1890ff',
						color: '#fff'
					},
					outer: {
						backgroundColor: '#e7e7e7',
						color: '#999',
					}
				}
			})
		},
		// 监听哪个的滚动条数据
		name: {
			type: String,
			default: ''
		},
		// 位置信息
		stick: {
			type: Object,
			default: () => ({
				right: '30px',
				bottom: '100px'
			})
		},
		// 屏幕滚动到哪显示置顶
		stickNum: {
			type: Number,
			default: 1000
		}
	},
	computed:{
		// 获取实时当前滚动条的位置
		scrollTop(){
			return this.$store.state.global.scrolls[this.name];
		},
		// 是否显示置顶按钮
		isShow(){
			return this.scrollTop > this.stickNum;
		}
	}
}
</script>

<style scoped>
.stick{
	position: fixed;
	width: 40px;
	height: 40px;
	padding-right: -1px;
	font-size: 36px;
	border: 1px solid #ccc;
	cursor: pointer;
	z-index: 30;
}
</style>